<!DOCTYPE html>

<html lang="en">
    <head>

        <script type="text/javascript">
            function showResult(str)
            {
                if (str.length == 0)
                {
                    document.getElementById("livesearch").innerHTML = "";
                    document.getElementById("livesearch").style.border = "0px";


                    return;
                }
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        document.getElementById("livesearch").style.display = "block";
                        document.getElementById("livesearch").style.visibility = "visible";
                        document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
                        document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
                    }
                }
                xmlhttp.open("GET", "uniprot.php?q=" + str, true);
                xmlhttp.send();
            }
            function showResult_names(str_p)
            {
                if (str_p.length == 0)
                {
                    document.getElementById("livesearch_p").innerHTML = "";
                    document.getElementById("livesearch_p").style.border = "0px";

                    return;
                }
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {
                        //document.getElementById("livesearch_p").innerHTML = xmlhttp.responseText;
                       // document.getElementById("livesearch_p").style.border = "1px solid #A5ACB2";
                        document.getElementById("livesearch_p").style.display = "block";
                        document.getElementById("livesearch_p").style.visibility = "visible";
                        document.getElementById("livesearch_p").innerHTML = xmlhttp.responseText;
                        document.getElementById("livesearch_p").style.border = "1px solid #A5ACB2";
                    }
                }
                xmlhttp.open("GET", "uniprot.php?t=name&q=" + str_p, true);
                xmlhttp.send();
            }
        </script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <title>BioMine-DB</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content=""><!-- Le styles -->
        <link href="./css/bootstrap.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css"><!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
        <!-- Le fav and touch icons -->
        <link rel="shortcut icon" href="./assets/ico/favicon.ico">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="./assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="./assets/ico/apple-touch-icon-57-precomposed.png">
    </head>

    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="index.html">BioMine-DB-&gt;</a>

                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a href="index.html">Home</a></li>

                            <li><a href="download.html">Download</a></li>

                            <li><a href ="http://montastraea.psu.edu:4567/" target="_blank">BLAST</a></li>

                            <li><a href="about.html">About</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container">
            <!-- Main hero unit for a primary marketing message or call to action -->

            <div class="hero-unit">
                <h1>Welcome to BioMine-DB</h1>

                <p>The database for Biomineralization Proteins</p>

            </div>

            <form class="well form-search" action="uniprot.php?q=" method="get">
                <div class="row">
                    <div class="span4">
                        <label>Search by species (e.g. homo sapiens) </label> <input type="text"  autocomplete="off" class="input-medium search-query" name="q" onkeyup="showResult(this.value)"> <button type="submit" class="btn">Search</button>
                        <div class="alert alert-info" id="livesearch" style="display: none;" ></div>

                    </div>
                    <div class="span4">
                        <label>Search by Protein name (e.g. dermatopontin) </label> <input type="text" class="input-medium search-query"  name="n" onkeyup="showResult_names(this.value)"> <button type="submit" class="btn">Search</button>

                        <div class="alert alert-info" id="livesearch_p"></div>
                    </div><!-- Example row of columns -->

                </div>
            </form>

        </div><!--<div class="alert alert-info" id="livesearch"></div>-->


       
        <hr>
		
		<footer class="bs-docs-footer" role="contentinfo">
  <div style="position: relative; text-align: center">
      <p style="position: fixed; bottom: 0; width:100%;"> © Copyright BioMine Team 2014</p>
    </div>
  
</footer>
		<!-- /container -->
        <!-- Le javascript
          ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="./js/jquery.js" type="text/javascript">
        </script><script src="./js/bootstrap-transition.js" type="text/javascript">
        </script><script src="./js/bootstrap-alert.js" type="text/javascript">
        </script><script src="./js/bootstrap-modal.js" type="text/javascript">
        </script><script src="./js/bootstrap-dropdown.js" type="text/javascript">
        </script><script src="./js/bootstrap-scrollspy.js" type="text/javascript">
        </script><script src="./js/bootstrap-tab.js" type="text/javascript">
        </script><script src="./js/bootstrap-tooltip.js" type="text/javascript">
        </script><script src="./js/bootstrap-popover.js" type="text/javascript">
        </script><script src="./js/bootstrap-button.js" type="text/javascript">
        </script><script src="./js/bootstrap-collapse.js" type="text/javascript">
        </script><script src="./js/bootstrap-carousel.js" type="text/javascript">
        </script><script src="./js/bootstrap-typeahead.js" type="text/javascript">
        </script>
    </body>
</html>
